<template>
    <ul>
      <li v-for="item in firstGroupList" v-text="item.name"
           @click="getChildGroup(item)" 
           v-bind:class="{ active: item.id==curr_group_sel}">
  
      </li>
    </ul>
</template>

<script>

import api from '@/api/api'
export default {
  name: 'leftNav',
  data() {
    return {
      firstGroupList: [],
      curr_group_sel: ''
    }
  },
  methods: {
    getGroupList: function () {
      let params = {
        functioncode: 'group_list',
        group_type: 45,
        limit: 20,
        page: 1,
        team_id: this.team_id,
        total: 0
      }
      api.get(params).then((res) => {
        if (res.data.returncode == '000000') {
          this.firstGroupList = res.data.record;
          this.getChildGroup(this.firstGroupList[0]);
        }
      });

    },
    getChildGroup: function (target) {
      this.curr_group_sel  = target.id;
      this.$emit('changeGroup', target.id)
    }
  },
  mounted: function () {
    this.$nextTick(function () {
      this.getGroupList();
    });
  },
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>
